import React, { useEffect } from 'react';
import type { ITouchEvent } from '@tarojs/components';
import { requestSubscribeMessage } from '@tarojs/taro';
import { useRecoilValue } from 'recoil';
import { useSubscriptionsModel } from '@/models/useGlobalModel';
import { Button } from '@antmjs/vantui';

declare type AuthNoticeCustomType = {
  /**
   * 需要限制权限的按钮或者内容
   */
  children: React.ReactNode;
  /**
   * 自定义的父级的className
   */
  className?: string;
  /**
   * 点击事件
   * @returns
   */
  onClick?: (e: ITouchEvent) => void;
  /**
   * 是否禁用
   */
  disable?: boolean;

  style?: any;
  [key: string]: any;
};

const AuthNoticeCustom = (Props: AuthNoticeCustomType) => {
  const loadingRef = React.useRef<boolean>(false);
  const { className, children, onClick, disable, style, ...rest } = Props;
  const subscriptionsModel = useRecoilValue(useSubscriptionsModel);

  useEffect(() => {}, [subscriptionsModel]);

  const subscribeMessage = (e: ITouchEvent) => {
    if (loadingRef.current) {
      return;
    }
    const tmplId = 'U0Q0NbMKUyFKsjdlo_nO5PG2orb_gUAZEkaQhZFjQk8';
    loadingRef.current = true;
    requestSubscribeMessage({
      tmplIds: [tmplId],
      entityIds: [tmplId],
      success: (res: any) => {
        if (res && res[tmplId] && res[tmplId] === 'accept') {
        }
        if (!disable && onClick && typeof onClick === 'function') {
          onClick(e);
        }
        loadingRef.current = false;
      },
      fail: () => {
        if (!disable && onClick && typeof onClick === 'function') {
          onClick(e);
        }
        loadingRef.current = false;
      },
    });
  };

  return (
    <Button
      onClick={subscribeMessage}
      className={`auth-notice-custom ${className ? className : ''}`}
      style={style}
      type="primary"
      {...rest}
    >
      {children}
    </Button>
  );
};

export default AuthNoticeCustom;
